Rodrigo

Hi @Ali Ab, Isn't this thread related or an exact duplicate of this: We do our best to answer to all threads in less than 24 hours, so please don't create duplicated threads since it makes it harder to keep track. You'll get a fast answer regardless of the amount of threads you create. I already provided an answer in the other thread, so if it's OK with you we can keep our focus in that other thread. Happy Tweening!

As far as I know the Seamless Loop helper predicates in the fact that all the remainder elements will cover all the available space in it's parent when the first element is out of the view, which is not the case in your images. Honestly IDK how that could be worked around. As Cassie mentions this is something Jack came up with so he would be the one to say the final word on this subject, but if I recall correctly something similar to your situation has popped up in the forums in the past and I believe there is not a lot that can be done without duplicating the elements. Happy Tweening!

Definitely, but that could create some scroll jumps, you should look into the disable and enable methods: https://gsap.com/docs/v3/Plugins/ScrollTrigger/disable() https://gsap.com/docs/v3/Plugins/ScrollTrigger/enable() I'm not sure of what you're trying to do, but disabling and enabling, or killing a ScrollTrigger instance doesn't sound like the best approach in this case. Maybe pin the element using pinSpace false and use a second ScrollTrigger instance to tween the opacity. Unfortunately I don't have time to create a demo for you, especiallly considering that I'll be guessing what you're trying to do here. Hopefully this helps. Happy Tweening!

Hi, The main problem here is that the DOM is not completely updated right after you change the state, you have to wait for the DOM to be updated before calling ScrollTrigger.refresh(). For that just create the Tween and the ScrollTrigger inside a useGSAP hook without dependencies and use a second useGSAP hook with the state property as a dependency to call the refresh method. You're looking for something like this: useGSAP(() => { const root = document.querySelector('#root'); gsap.to('.slider', { x: () => -( sliderRef.current.scrollWidth - document.documentElement.clientWidth ) + 'px', ease: 'none', scrollTrigger: { trigger: '#root', scrub: 1, markers: true, start: 'top top', end: () => '+=' + sliderRef.current.offsetWidth, pin: true, invalidateOnRefresh: true, }, }); }); useGSAP( () => { ScrollTrigger.refresh(); }, { dependencies: [count] } ); Here is a fork of your demo: https://stackblitz.com/edit/vitejs-vite-p12uuo?file=src%2FApp.jsx Hopefully this helps. Happy Tweening!

Hi, These demos can provide some inspiration: https://codepen.io/GreenSock/pen/bGZKWjp https://codepen.io/GreenSock/pen/poBRQRj Also take a look at this guide @mvaneijgen created on the subject: Hopefully this helps. Happy Tweening!

Hi, I'm not 100% sure I completely understand what you're trying to achieve, so I took my best guess and came up with this: https://codepen.io/GreenSock/pen/bGyJZKg Hopefully this helps. Happy Tweening!

You'll have to juggle a bit with math in order to achieve an exact amount of pixels. Roughly this is how it works: const flipConfig = { ease: "none", duration: 1, absolute: true }; tl .add(Flip.fit(".hero-video", secondState, flipConfig)) .add( Flip.fit(".hero-video", thirdState, flipConfig), "+=1" // <- Position Parameter ); Each instance has a duration of 1 second, then your ScrollTrigger config has a start and end points which can be translated into an amount of pixels, then you can associate one second (duration of each flip) to a number of pixels (keep in mind that both flips will take two seconds). So you can estimate an amount pixels to a number of seconds and use that in the position parameter as shown in the code above. I gave it 1 second and it looks good, but you'll have to play a bit with it. Take a peek a the docs in order to better understand how this works: https://gsap.com/docs/v3/GSAP/Timeline#positioning-animations-in-a-timeline Hopefully this helps. Happy Tweening!

Hi, This is not related to the order of the tags in your HTML, but mostly to some issues on the logic in your code. There are two issues I can spot in your code. The first problem is that the Draggable instance of each element is not updated after the element is dropped in the scale and the transform property added by Draggable is not removed, this can be solved by this in your hide method: const hide = (element, number = 0) => { gsap.to(element, { duration: 0, opacity: 0, scale: 0, x: 0, y: 0, onComplete: () => { // Get the draggable instance for the element const d = Draggable.get(element); // Remove the transforms applied to the element gsap.set(element, { clearProps: "transform" }); // Update the Draggable instance d.update(); }, }); element.classList.remove("w-3"); element.classList.remove("w-1"); }; The second problem is that the logic of your show method is working only when you drag something on the scale and not when you drag it from the scale, since both elements (the one in the scale and the one in the rectangle area) have opacity 0 after you remove them from the scale. You need to find a way to track the element(s) in the scale in order to correctly show the one in the rectangle area once is removed from the scale. Unfortunately I don't have the time to dig into your code and find a way to make this work as you expect, especially since this is mostly a logic issue rather than a GSAP related one. Hopefully this helps. Happy Tweening!

We can see the demo, the problem is that we can't save any changes we make to it in order to experiment and see if we can find a way to solve it. Sorry to reiterate this, but without a demo that we can tinker with, that clearly illustrates the problem, there is not a lot we can do to help. Once again my suggestion would be to strip this down to the bare minimum and start adding features and animations to it until you find what brakes it. Sorry I can't be of more assistance. Happy Tweening!

Hi, I've read this and checked your demo a few times and unfortunately I can't understand what you're referring to with this. Can you explain a bit more what's the issue you're seeing and how to reproduce it? Just use the same background color in the container of the cards and that should solve the issue. This most likely is related to subpixel rendering in browsers which is not at all related with GSAP. On top of that it seems you're using a very old helper function to create smooth scrolling. We strongly recommend using ScrollSmoother for that: https://gsap.com/docs/v3/Plugins/ScrollSmoother/ Finally based on what I'm seeing you might want to check GSAP MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this helps. Happy Tweening!

Hi, Here are a couple of demos that you can look at: https://codepen.io/GreenSock/pen/poBRQRj https://codepen.io/GreenSock/pen/PovzpJr Hopefully this helps. Happy Tweening!

Hi, The main issue is here: move.style.transform = "translateX(" + x + "px) translateY(" + y + "px)"; You're applying some styles to the transform property directly in the mousemove event handler, but GSAP is doing the same with the Timeline controlled by ScrollTrigger, hence the jump. Better leave all the work for GSAP, because GSAP is smart enough to animate each transform property independently without affecting any values. Here is a fork of your demo: https://codepen.io/GreenSock/pen/mdYKOwK Hopefully this helps. Happy Tweening!

Hi, The main issue here is that the useGSAP hook has no dependencies, so by defaults it uses an empty dependencies array, so it runs only when the component gets mounted, which is good, since there is no need in this particular case to run it everytime the state is updated. But you do have to refresh the ScrollTrigger instances after updating the state and that's when you can use a useGSAP hook with that isData state property and call ScrollTrigger.refresh() there, something like this: useGSAP( () => { const tl = gsap.timeline({ scrollTrigger: { trigger: footerRef.current, start: "top bottom", toggleActions: "play none none reverse", markers: true, }, }); let ctx = gsap.context(() => { tl.fromTo( footerRef.current, { opacity: 0 }, { opacity: 1, duration: 5, ease: "power3" } ); }, footerRef); return () => { ctx.revert(); }; }, { scope: footerRef } ); useGSAP( () => { ScrollTrigger.refresh(); }, { dependencies: [isData], } ); function handleChanges(boxId) { setIsData(isData.filter((d) => d.id !== boxId)); } You can replace the second useGSAP hook with a useLayoutEffect hook, but useGSAP is just a replacement for the useEffect/useLayoutEffect hooks with cleanup in it. Hopefully this helps. Happy Tweening!

Hi, You can definitely pin the same element more than once. As an FYI you can't mix the pin type or pinSpacing. Your demo has a fundamental design flaw though, the section you're pinning has the screen height, so it gets pinned by the first ScrollTrigger, then normal scroll resumes and it goes above the fold and then gets pinned again. So the element becomes pinned twice as expected, but the second time you can't see it because is not on the viewport, is above the viewport. See the problem? You should tinker with your HTML/CSS in order to achieve what you're aiming for. @Hideakimaru, thanks for helping out in the forums! Is great to see the community engaged and giving a hand! 💚. Just be careful with this approach: const tl = gsap.timeline(); tl.to(".PINED__ELEMENT", { scrollTrigger: { trigger: ".UNPINED", start: "top bottom", markers: true }, display: "none" }); tl.to(".PINED__ELEMENT", { scrollTrigger: { trigger: ".PINED", start: "bottom bottom", markers: true }, display: "flex" }); You shouldn't nest ScrollTrigger instances inside a child instance of a Timeline, as stated in the docs this could create unexpected logical issues: https://gsap.com/resources/st-mistakes#nesting-scrolltriggers-inside-multiple-timeline-tweens Happy Tweening!

Hi, Maybe something like this: https://jsfiddle.net/asfjx8dL/ Hopefully this helps. Happy Tweening!